<template>
	<view class="prizeRecords">
		<NavTabBar :tabLists="orderStatus" ref="navTabBar" @handleChange="changCurTabs"></NavTabBar>
		<view class="oder_list" v-if="curTabsObj.status=='team'">
			<view class="tour_item" v-for="item in orderList.lists">
				<PrizeOrderItem :itemData="item" @changeOrderStatus="initGetList"></PrizeOrderItem>
			</view>
		</view>
		<view class="oder_list" v-if="curTabsObj.status=='day_tour'">
			<view class="tour_item" v-for="item in orderList.lists">
				<prizeTourOrderItem :itemData="item" @changeOrderStatus="initGetList"></prizeTourOrderItem>
			</view>
		</view>
		<view class="coupons_list" v-if="curTabsObj.status=='coupon'">
			<view class="coupon_big_item" v-for="(item, index) in orderList.lists" :key="index">
				<view class="coupon_sn">
					订单编号: {{item.order_id}}
				</view>
				<view class="coupons_item">
					<view class="coupons_left_price_box fn-cl-F34035">
						<view class="">
							<span class="fn-sz-26">￥</span>
							<span class="fn-sz-52">{{ numberToFix(item.order_info.price) }}</span>
						</view>
						<view class="fn-sz-20">满{{ item.order_info.full_use }}可用</view>
					</view>
					<view class="coupons_right_date_box">
						<view class="fn-sz-28 mar-bottom-10">有效期</view>
						<view class="fn-sz-24 fn-cl-999999">
							{{ item.order_info.start_date }}至{{ item.order_info.end_date }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="money_list" v-if="curTabsObj.status=='money'">
			<view class="money_item" v-for="item in orderList.lists">
				<view class="order_sn_box">
					订单编号:{{item.order_id}}
				</view>
				<view class="money_num_box">
					中奖金额: ￥{{item.money}}
				</view>
			</view>
		</view>
		<u-loadmore :status="loadMoreStatus" v-if="orderList.lists.length" />
	</view>
</template>

<script>
	import NavTabBar from '../../components/navTabBar/navTabBar.vue';
	import prizeTourOrderItem from '../../components/prizeTourOrderItem/prizeTourOrderItem.vue';
	import PrizeOrderItem from '../../components/prizeOrderItem/prizeOrderItem.vue';
	import com from '../../mixin/index.js';
	export default {
		components: {
			NavTabBar,
			PrizeOrderItem,
			prizeTourOrderItem
		},
		mixins: [com],
		data() {
			return {
				orderStatus: [{
						name: '社区团购',
						status: 'team'
					},
					{
						name: '一日游',
						status: 'day_tour'
					},
					{
						name: '优惠券',
						status: 'coupon'
					},
					{
						name: '省钱卡',
						status: 'money'
					},
				],
				ticket: [{
						price: 5,
						full_use: 20,
						start_date: '2024-03-05',
						end_date: '2024-04-05'
					},
					{
						price: 7,
						full_use: 40,
						start_date: '2024-03-05',
						end_date: '2024-04-05'
					},
				],
				page: {
					page: 1,
					page_size: 10
				},
				orderList: {
					lists: [],
					total: 1,
					total_page: 0
				},
				curTabsObj: {
					name: '社区团购',
					status: 'team'
				}
			};
		},
		onLoad(val) {
			// if (val.status) {
			// 	let status = val.status;
			// 	console.log(val, 'sasa');
			// 	this.curTabsObj = this.orderStatus.find((item, index) => {
			// 		if (item.status == status) {
			// 			this.$refs.navTabBar.currentTab = index;
			// 			return item;
			// 		}
			// 	});
			// 	// this.tabLists.indexOf(curTabsObj.name);
			// }
			this.getDrawRecord();
		},
		onReachBottom() {
			this.getDrawRecord();
		},
		onPullDownRefresh() {
			this.initGetList();
		},
		methods: {
			changCurTabs(val) {
				console.log(val, '切换了 aaaaaaaa');
				this.curTabsObj = this.orderStatus[val];
				this.initGetList();
			},
			//初始化重新获取
			initGetList() {
				this.page = {
					page: 1,
					page_size: 10
				};
				this.orderList = {
					lists: [],
					total: 1,
					total_page: 0
				};
				this.getDrawRecord();
			},
			getDrawRecord() {
				console.log(this.curTabsObj, 'sssssssss');
				let params = {
					type: this.curTabsObj.status,
					...this.page
				};
				this.getList('orderList', 'getDrawRecord', 'page', params).then(res => {
					uni.stopPullDownRefresh();
				});
			},
			setAddress({
				address_id,
				record_id
			}) {
				this.$api.addAddress({
					address_id,
					record_id
				}).then(res => {
					if (res.code == 1) {
						this.$helper.toast(res.msg);
						setTimeout(() => {
							this.initGetList();
						}, 1500)
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.prizeRecords {
		min-height: 100vh;
		padding: 0 24rpx 24rpx;
		background-color: #f9f9f9;

		.page_top_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 10rpx;

			.pageTitle {
				padding-left: 80rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
			}

			.user_op_box {
				display: flex;
				align-items: center;

				.op_item {
					text-align: center;
					margin-right: 20rpx;

					&:nth-last-child(1) {
						margin-right: 0;
					}

					.op_item_name {
						font-size: 20rpx;
						color: #333;
					}
				}
			}
		}

		.oder_list {
			.tour_item {
				margin-bottom: 20rpx;
			}
		}

		.coupons_list {
			.coupon_big_item {
				background: #FFFFFF;
				border-radius: 20rpx;
				padding: 32rpx 24rpx 42rpx;
				margin-bottom: 20rpx;

				.coupon_sn {
					color: #666666;
					font-size: 28rpx;
					margin-bottom: 26rpx;
				}

				.coupons_item {
					display: flex;
					width: 100%;
					height: 184rpx;
					align-items: center;
					background: url('../../static/images/icon/bg_coupons.png') no-repeat;
					background-size: 100% 184rpx;
					box-sizing: border-box;
					padding: 33rpx 39rpx;
					margin-bottom: 17rpx;

					.coupons_left_price_box {
						margin-right: 67rpx;
					}

					.coupons_right_date_box {}
				}
			}

		}

		.money_list {
			.money_item {
				background: #FFFFFF;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				padding: 32rpx 24rpx 40rpx;

				.order_sn_box {
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 20rpx;
				}

				.money_num_box {
					font-size: 28rpx;
				}
			}
		}
	}
</style>